<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        // 已优化：子组件更新父组件中的引用数据类型！！！；点击事件的 多步骤操作拆分进计算属性！！！
        // 列表渲染组件为什么这里子组件的props传递，可以改变父组件的todoList中的值？？？
            // 因为 数组 是引用数据类型，数组地址未改变，满足单向数据流原则！！！
            // 但不建议在子组件里进行父组件数据修改！！！！！！ 
            // 故不建议使用@click="item.done=!item.done" ！！！！

        // 已优化: a标签无法取消下划线！！！
            // a标签  的改动 需直接找的对应 a元素 进行更改！！！！！
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件版-todolit</title>
    <style>
        .doneStyle{
            text-decoration: line-through;
            color: red;
        }
        .statusStyle{
            display: inline-block;
            width: 60px;
            text-align: center;
            background-color: lightslategray;
            color: tomato;
        }
        a{
            text-decoration: none;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <todolist-ct></todolist-ct>
    </div>
    
    <script src="vue.js"></script>
    <script>
        Vue.component('todolist-ct',{
            template:`
            <div>
                {{currentStatus}}
                <hr>
                {{newOneEvent}}
                <hr>
                {{activeEventSum}}{{allEventSum}}
                <hr>
                <li v-for="(item,index) in todoListDate">{{item.name}},{{item.done}}</li>
                <hr>
                <status-ct @transStatus="transStatus" :activeEventSum="activeEventSum" :allEventSum="allEventSum" :currentStatus="currentStatus"></status-ct>
                <eventlist-ct :filterTodoListData="filterTodoListData" @eventStatusToggle="eventStatusToggle"></eventlist-ct>    
                <add-event-ct @transNewEvent="transNewEvent"></add-event-ct>
            </div>
            `,
            data(){
                return {
                    // 状态值接收-ok
                    currentStatus:"All",

                    // 任务事件值接收-ok
                    newOneEvent:"",

                    // 任务列表
                    todoListDate:[
                        {name:"HTML",done:true,},
                        {name:"CSS",done:false,},
                        {name:"JavaScript",done:false,},
                    ],
                }
            },
            methods:{
                // 状态值传递函数-ok
                transStatus(status){
                    console.log("transStatus-foo-change-status:"+status);
                    return this.currentStatus = status;
                },

                // 添加任务事件值传递函数-ok
                transNewEvent(newEvent){
                    console.log("transNewEvent-foo-newEvent:"+newEvent);
                    this.newOneEvent = newEvent;
                    return this.todoListDate.push({
                        name:newEvent,
                        done:false,
                    })
                },

                // 任务状态值修改函数-注意是修改的计算属性的过滤任务列表数据;
                // 介于 引用数据类型 故 原始数据 的值也会改变！！
                eventStatusToggle(index){
                    this.filterTodoListData[index].done = !this.filterTodoListData[index].done;
                }
            },
            computed:{
                // 匹配状态值-任务数据过滤
                filterTodoListData(){
                    switch(this.currentStatus){
                        case "Active": return this.todoListDate.filter(item => !item.done);
                        case "Done": return this.todoListDate.filter(item => item.done);
                        default: return this.todoListDate;
                    }
                },

                // 计算任务完成与所有任务
                activeEventSum(){
                    return (this.todoListDate.filter(item => item.done)).length;
                },
                allEventSum(){
                    return (this.todoListDate).length;
                }
            }
        });

        // 注意输入完成后清空文本框
        Vue.component('add-event-ct',{
            props:[,],
            template:`
            <div>
                <input type="text" name="" id="" v-model.lazy="addOneEvent">
                <button @click="transNewEvent">add</button>
            </div>
            `,
            data(){
                return {
                    addOneEvent:"",
                }
            },
            methods:{
                //作用： 判断新输入值是否为空值；传值给父组件；输入后文本框为空
                transNewEvent(){
                    if(this.addOneEvent){
                        // 多余步骤：
                        // var newEvent = this.addOneEvent;
                        // this.$emit('transNewEvent',newEvent);
                        // 优化为下：
                        this.$emit('transNewEvent',this.addOneEvent);
                        this.addOneEvent = "";
                    }
                    else{
                        alert("未输入，请输入后重新添加！");
                    }
                }
            }

        });

        Vue.component('eventlist-ct',{
            // 条件渲染所需
            props:{
                filterTodoListData:{
                    type: [Object,Array,String],
                    default:()=>{return filterTodoListData}
                },

            },
            // 列表渲染组件为什么这里子组件的props传递，可以改变父组件的todoList中的值？？？
            // 因为 数组 是引用数据类型，数组地址未改变，满足单向数据流原则！！！
            // 但不建议在子组件里进行父组件数据修改！！！！！！
            // 故不建议使用@click="item.done=!item.done" ！！！！
            // 优化为下：
            template:`
            <div>
                <ul>
                    <li v-for="(item,index) in filterTodoListData" 
                    :class="{doneStyle:item.done}" 
                    :key="index" 
                    @click="$emit('eventStatusToggle',index)">{{item.name}}</li>
                </ul>
            </div>
            `,
        });

        Vue.component('status-ct',{
            props:["activeEventSum","allEventSum","currentStatus"],
            template:`
            <div id="status-ct">
                <a href="" @click.prevent="$emit('transStatus','All')" 
                :class="{statusStyle:currentStatus=='All' }">All</a>

                <a href="" @click.prevent="$emit('transStatus','Active')" 
                :class="{statusStyle:currentStatus=='Active' }">Active</a>

                <a href="" @click.prevent="$emit('transStatus','Done')" 
                :class="{statusStyle:currentStatus=='Done' }">Done</a>

                <span>{{activeEventSum}}/{{allEventSum}}</span>    
            </div>
            `,
            data(){
                return {
                    
                }
            },
            methods:{
                
            }
        });

        new Vue({
            el:"#app",
            data(){
                return {
                }
            },
        })
    
    </script>
    
</body>
</html>